<div id="slipCheckBar" class="slipcheck-bar">
	<div id="slipCheckContent" class="slipcheck-content"></div>
	<div class="slipcheck-tool">
		<div class="slipcheck-tool-btnOk" onclick="closeSlipCheckDiv()">确定</div>
	</div>
</div>
<div id="maskSlipCheckDiv" class="mask-slipcheck-div" style="display: none;" onclick="closeSlipCheckDiv()"></div>

<script type="text/javascript">
	function openSlipCheckDiv(option, html) {
        //加载选择内容
        setHtml('slipCheckContent', html);

        //设置已选条件
        if (option != '') {
            objList = getItem('slipCheckContent').children;
            for (var i = 0; i < objList.length; i++) {
                if (option.includes(objList[i].innerHTML)) {
                    objList[i].className = 'slipcheck-option-selected';
                }
            }
        }

        setDisplay('maskSlipCheckDiv', '');
        document.body.style.overflow = 'hidden';
        setClass('slipCheckBar', 'slipcheck-bar-out');
    }

    function closeSlipCheckDiv() {
        setHtml('slipCheckContent', '');
        setDisplay('maskSlipCheckDiv', 'none');
        document.body.style.overflow = 'visible';
        setClass('slipCheckBar', 'slipcheck-bar-in');
    }

    function getCheckItemBar(textid, valueid, list) {
    	var html = '';
        for (var i = 0; i < list.length; i++) {
            if (valueid != '') {
                html += '<div class="slipcheck-option" onclick="checkOptionItem(\'' + textid + '\', \'' + list[i].text + '\', \'' + valueid + '\', \'' + list[i].value + '\', this)">' + list[i].text + '</div>';
            }
            else {
                html += '<div class="slipcheck-option" onclick="checkOptionItem(\'' + textid + '\', \'' + list[i].text + '\', \'\', \'\', this)">' + list[i].text + '</div>';
            }
        }

        return html;
    }

    function checkOptionItem(textid, text, valueid, value, obj) {
    	if (obj.className == 'slipcheck-option-selected') {
    		obj.className = 'slipcheck-option';
    		if (getValue(textid).includes(text)) {
		        setValue(textid, getValue(textid).replace('，' + text, ''));
		        setValue(textid, getValue(textid).replace(',' + text, ''));
		        setValue(textid, getValue(textid).replace(text + '，', ''));
		        setValue(textid, getValue(textid).replace(text + ',', ''));
		        setValue(textid, getValue(textid).replace(text, ''));
		    }

		    if (valueid != '' && value != '') {
		    	if (getValue(valueid).includes(value)) {
			        setValue(valueid, getValue(valueid).replace('，' + value, ''));
			        setValue(valueid, getValue(valueid).replace(',' + value, ''));
			        setValue(valueid, getValue(valueid).replace(value + '，', ''));
			        setValue(valueid, getValue(valueid).replace(value + ',', ''));
			        setValue(valueid, getValue(valueid).replace(value, ''));
			    }
		    }
    	}
    	else {
	        obj.className = 'slipcheck-option-selected';
	        if (!getValue(textid).includes(text)) {
	            if (getValue(textid) != '') {
	                setValue(textid, getValue(textid) + '，' + text);
	            }
	            else {
	                setValue(textid, text);
	            }
	        }

	        if (valueid != '' && value != '') {
	        	if (!getValue(valueid).includes(value)) {
		            if (getValue(valueid) != '') {
		                setValue(valueid, getValue(valueid) + '，' + value);
		            }
		            else {
		                setValue(valueid, value);
		            }
		        }
	        }
	    }
    }
</script>

<style type="text/css">
	.slipcheck-bar, .slipcheck-bar-out, .slipcheck-bar-in
    {
        width: 100%;
        height: 40%;
        bottom: -40%;
        background-color: white;
        display: -webkit-flex;
	    -webkit-flex-direction: column;
	    -webkit-align-items: stretch;
        position: fixed;
        z-index: 201;
    }

    .slipcheck-bar-out
    {
        -webkit-animation: slipcheckout 0.1s;
        bottom: 0;
    }

    .slipcheck-bar-in
    {
        -webkit-animation: slipcheckin 0.1s;
        bottom: -40%;
    }

    @keyframes slipcheckout
    {
        from { bottom: -40%; }
        to { bottom: 0; }
    }

    @keyframes slipcheckin
    {
        from { bottom: 0; }
        to { bottom: -40%; }
    }

    .mask-slipcheck-div
    {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 200;
    }

    .slipcheck-option, .slipcheck-option-selected
	{
	    width: 21.5%;
	    height: 70px;
	    line-height: 70px;
	    margin-top: 30px;
	    margin-left: 20px;
	    background-color: white;
	    border: 1px solid #d2d2d2;
	    font-size: 26px;
	    color: #333333;
	    text-align: center;
	    display: inline-block;
	}

	.slipcheck-option-selected
	{
	    color: #21A0F7;
	    background-color: white;
	    border: 1px solid #21A0F7;
	}

    .slipcheck-content
    {
    	-webkit-flex: auto;
    	overflow-x: hidden;
        overflow-y: scroll;
    }

    .slipcheck-tool
    {
    	-webkit-flex: none;
    	height: 120px;
    	background-color: white;
    	border-top: 1px solid #E4E4E4;
    	padding-left: 20px;
    	padding-right: 20px;
    	display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
    }

    .slipcheck-tool-btnCancel
    {
    	-webkit-flex: none;
    	padding: 20px 30px 20px 30px;
	    border: 1px solid #abacae;
	    color: #abacae;
	    font-size: 30px;
	    border-radius: 10px;
	    margin-right: 20px;
    }

    .slipcheck-tool-btnOk
    {
    	-webkit-flex: auto;
    	padding: 20px 10px 20px 10px;
	    border: 1px solid #21A0F7;
	    color: white;
	    font-size: 30px;
	    text-align: center;
	    background-color: #21A0F7;
	    border-radius: 10px;
    }
</style>